<template>
	<view>
		<button :class="classList[pattern]"
		 @click="invokeBtn">{{text}}</button>
	</view>	
</template>·

<script>
	export default {
		name:"wzh-btn",
		props:{
			text:{
				type: String,
				default:0,
				required:true	
			},
			pattern:{
				type: String,
				default:''
			}
			
		},
		data() {
			return {
				classList:{
					1:'submit_but',
					2:'cancel_but',
					3:'withdraw_button',
					4:'Subscriptioninformation_button',
					5:'subscription_button',
					6:'Viewquota_button',
					7:'appointment_button',
					8:'card_change',
					9:'card_withdraw',
					10: 'sub_info_button'
				}
			};
			
		},
		methods: {
			invokeBtn () {
				this.$emit("invokeBtn")
			}
		}
	}
</script>

<style lang="scss">
	/* 底部按钮 */
	.submit_but {
		border-radius: 10rpx;
		// border-width: 1rpx;
		// border-style: solid;
		background-color: $buttton-color-one;
		text-align: center;
		height: 94rpx;
		width: 302rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.cancel_but {
		border-radius: 10rpx;
		// border-width: 1rpx;
		// border-style: solid;
		border-color: $button-color-two;
		text-align: center;
		height: 94rpx;
		width: 302rpx;
		line-height: 90rpx;
		color: #000000;
		font-size: 30rpx;
	}
	.bottom_but{
		display: flex;
	}
	.appointment_button{
		font-size: 28rpx;
		border-radius: 100rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: $buttton-color-one;
		padding: 0 10rpx;
		outline: none;
		height: 54rpx;
		width: 122rpx;
		background-color: #FFFFFF;
		color: $buttton-color-one;
		text-align: center;
		line-height: 50rpx;
	}
	.Viewquota_button{
		border-radius: 10rpx;
		height: 70rpx;
		width: 268rpx;
		background-color: $buttton-color-one;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 65rpx;
	}
	.withdraw_button{
		border-radius: 10rpx;
		border: 1rpx solid #0877c6;
		background-color: $button-color-two;
		// border-width: 1rpx;
		// border-style: solid;
		text-align: center;
		outline: none;
		height: 94rpx;
		width: 302rpx;
		line-height: 90rpx;
		color: #0877c6;
		font-size: 30rpx;
	}
	.Subscriptioninformation_button {
		border-radius: 8rpx;
		// border-width: 1rpx;
		// border-style: solid;
		background-color: $buttton-color-one;
		text-align: center;
		height: 70rpx;
		width: 604rpx;
		line-height: 70rpx;
		color: #FFFFFF;
		// font-size: 30rpx;
	}
	.subscription_button {
		border-radius: 8rpx;
		// border-width: 1rpx;
		// border-style: solid;
		background-color: $buttton-color-one;
		text-align: center;
		height: 94rpx;
		width: 690rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.card_change{
		width: 260rpx;
		height: 70rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 65rpx;
		background-color: $buttton-color-one;
	}
	.card_withdraw{
		width: 260rpx;
		height: 70rpx;
		outline: none;
		font-size: 30rpx;
		text-align: center;
		line-height: 65rpx;
		border-radius: 10rpx;
		color: $buttton-color-one;
		border: 1rpx solid #0877c6;
		background-color: $button-color-two;
	}
	.sub_info_button {
		width: 606rpx;
		height: 80rpx;
		background: $logo-font-color-one;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		margin-top: 38rpx;
	}
</style>
